<template>
  <div class="rechild_box">
    <loading></loading>
    <div class="rechild_secbox">
      <div class="rechild_star">
        <span class="glyphicon glyphicon-star"
          v-for="i in stars" :key="i"
          :style="{color: 'yellow'}"></span>
      </div>
      <div class="rechild_line"></div>
      <div class="recchild_context">
        <h3>{{shopName}}</h3>
        <div class="mes_box">
          <div class="img_box">
            <img src="../assets/gps-1.jpg"/>
          </div>
          <div class="mes_context">
            <pre>{{article}}</pre>
          </div>
          <div class="love_box">
            <span class="glyphicon glyphicon-heart" :style="loved"></span>
          </div>
        </div>
        <div class="message">
          <div class="msgs">
            <table>
              <tbody style="text-align:center;">
                <tr style="font-weight:bold;">
                  <td class="username" width="100">username</td>
                  <td class="msg">msg</td>
                  <td class="controller" width="80">controller</td>
                </tr>
                <tr>
                  <td class="username">username</td>
                  <td class="msg">msg</td>
                  <td class="controller">
                    <input type="button" value="删除">
                  </td>
                </tr>
              </tbody>
            </table>
          </div><!-- end of .msgs. -->
          <div class="ipt">
            <textarea name="msg" id="msg" cols="70" rows="5"></textarea><br>
            <input type="button" value="提交" id="submitMsg" @click="sendMsg">
          </div><!-- end of .ipt. -->
        </div><!-- end of .message. -->
      </div>
    </div>
  </div>
</template>

<script src="../js/foodrecom_child.js"></script>

<style scoped>
  .message {
    width:600px;
    margin: 50px auto 0;
  }
  .message input,textarea { color: black !important; }
  .msgs table {
    width: 560px;
    margin:20px;
  }
  .msgs table, td {
    border: 1px solid wheat;
  }

  .rechild_box{
    min-height: 800px;
    width: 98%;
    background-color: black;
    margin: 1%;
    padding-bottom: 50px;
    color: white;
  }
  .rechild_star{
    text-align: center;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
  }
  .rechild_line{
    height: 10px;
    background-color: white;
  }
  .recchild_context>h3{
    text-align: center;
    font-size: 25px;
  }
  .recchild_context>.mes_box{
    margin:30px auto 0;
    text-align: center;
  }
  .mes_box{
    display: flex;
    justify-content:center;
    position: relative;
  }
  .mes_context{
    padding-top: 30px;
    width: 350px;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
  }
  .mes_context pre {
    display: block;
    padding: 0px;
    margin: 0px;
    font-size:unset;
    line-height: 1.5em;
    color: unset;
    background-color: transparent;
    border: 0px;
    border-radius: 0px;
  }
  .recchild_context>.mes_box>.img_box>img{
    width: 350px;
    height: 500px;
    padding-top: 10px;
  }
</style>
